<template>
  <div class="rank">
    <n-space justify="space-between">
      <div style="width: 36vw">
        <n-tabs type="segment">
          <n-tab-pane name="chap1" tab="最新文献">
            <n-list bordered>
              <n-list-item> 123 </n-list-item>
              <n-list-item> 123 </n-list-item>
              <n-list-item> 123 </n-list-item>
              <n-list-item> 123 </n-list-item>
            </n-list>
          </n-tab-pane>
          <n-tab-pane name="chap2" tab="最热文献"> </n-tab-pane>
          <n-tab-pane name="chap3" tab="最热专家">
            <n-list bordered>
              <n-list-item>
                <n-thing
                  title="Thing"
                  title-extra="extra"
                  description="description"
                >
                  Biu<br />
                </n-thing> </n-list-item
              ><n-list-item>
                <n-thing
                  title="Thing"
                  title-extra="extra"
                  description="description"
                >
                  Biu<br />
                </n-thing>
              </n-list-item>
            </n-list>
          </n-tab-pane>
          <n-tab-pane name="chap4" tab="？？？"></n-tab-pane>
        </n-tabs>
      </div>
      <div style="width: 35vw">
        <n-carousel show-arrow>
          <img
            class="carousel-img"
            src="https://s.anw.red/fav/1623979004.jpg!/fw/600/quality/77/ignore-error/true"
          />
          <img
            class="carousel-img"
            src="https://s.anw.red/news/1623372884.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
          />
          <img
            class="carousel-img"
            src="https://s.anw.red/news/1623177220.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
          />
          <img
            class="carousel-img"
            src="https://s.anw.red/news/1623152423.jpg!/both/800x450/quality/78/progressive/true/ignore-error/true"
          />
        </n-carousel>
      </div>
    </n-space>
    <n-space vertical style="margin-top: 5vh">
      <span>推荐</span>
      。。。
    </n-space>
  </div>
</template>

<script setup lang="ts"></script>

<style scoped lang="scss">
.rank {
  margin: 2vh 12vw 0;
  .carousel-img {
    width: 100vw;
    height: 55vh;
    object-fit: cover;
  }
}
</style>
